<template>
  <div id="login" >
      <div class="login-bg">
          <div class="login-container" >
              <div class="login-box" v-loading="loading" >
                <div class="login-title">{{ $t('message.title') }}</div>
                <el-form class="form-box" :model="loginInfo" :rules="rules" ref="login">
                    <el-form-item class="input-phone" prop="phone">
                        <el-input v-model="loginInfo.phone" suffix-icon ="el-icon-tickets" size="large" placeholder="请输入账号" ></el-input>
                    </el-form-item>
                    <el-form-item class="input-password" prop="password">
                        <el-input v-model="loginInfo.password" @keyup.native.enter="signUp" suffix-icon ="el-icon-view" size="large" type="password" placeholder="请输入密码" ></el-input>
                    </el-form-item> 
                </el-form>
                <div class="submit-box">
                    <el-button type="primary" size="large" @click="signUp" class="submit-login">登录</el-button>
                </div>
              </div>
              
          </div>
      </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
import { mapActions } from 'vuex';
export default {
  name:'login',
  data () {
      
    const validatephone = (rule,value,callback)=>{
        if(value === null || value === ""){
            callback(new Error("请输入账户！"))
        }else{
            // let p = /^[a-z]\w{3,}$/i;
            let p = /[0-9]*/
            if(p.test(value)){
                callback()
            }else{
                callback(new Error("账户格式有误！"))
            }
        }
    }

    return {
        loading:false,  
        loginInfo:{
            phone:null,
            password:null
        },
        rules:{
            phone:[
                 { validator: validatephone , trigger: 'change' }
            ],
            password:[
                { required: true, message: '请输入密码！', trigger: 'change' },
                { min: 6, message: '密码至少6位！', trigger: 'change' }
            ]
        }
        
    };
  },
  components: {},
  created() {},
  mounted() {
      let _this = this;
    //   this.$el.addEventListener('keyup',function(e){
    //       if(e.keyCode === 13){
    //          _this.login();
    //       }

    //   })
  },
  methods: {
      ...mapActions(["_setSystemStatus"]),
      signUp(){
          this.$refs["login"].validate((valid) => {
            if (valid) {
                // this.$message({
                //     message: '验证通过！',
                //     type: 'success'
                // });
                // this.$router.replace({phone:"index"})
                this.login();
            } else {
                this.$message.error('账号密码格式有误');
                return false;
            }
            });
          
      },
      login(){
          this.loading = true;
          let params = `urlType=1&phone=${this.loginInfo.phone}&password=${this.loginInfo.password}`;
          this.$Http.post(USB.U93,params).then((res)=>{
               this.loading = false;
              if(res.data.resp_code === "000000"){
                  this._setSystemStatus({attr:"userinfo",value:res.data.result})
                    sessionStorage.setItem(1,res.data.result.userToken)
                    sessionStorage.setItem(2,res.data.result.phone)
                    sessionStorage.setItem(3,res.data.result.brandId)
                    sessionStorage.setItem(4,res.data.result.id)
                    sessionStorage.setItem(9,res.data.result.realnameStatus)
                    sessionStorage.setItem(100,res.data.result.brandname)
                    sessionStorage.setItem(5,res.data.user_roleid)
                    // this.findUser(res.data.result.id); 接口改过 这里不需要再验证权限了
                     this.$router.replace({name:"memberInfo"})    
              }else{
                  this.$message.error(res.data.resp_message);
              }
          }).catch((err)=>{
              this.loading = false;
            //   console.log("登录验证失败！");
              this.$message.error("登录验证失败！")
          })
      },
      findUser(id){ // 获取用户登录级别 
         let params = `userId=${id}`;
         this.$Http.post(USB.U94,params).then(res=>{
             if(res.data.resp_code === "000000" && res.data.result.length > 0){
                    // console.log(res.data.result[0][0])
                    var roleid = res.data.result[0][0];
                    sessionStorage.setItem(5,roleid);
                    // console.log(roleid)
                    // console.log("token保存成功")
                    /*跳转页面*/
                    this.$router.replace({name:"index"})                                               
            }else{
                this.$message.error("您是普通用户，没有登陆权限！");
            }
         }).catch(err=>{
            //  console.log("获取用户登录信息失败！");
             this.$message.error("获取用户权限失败！");
         })
      }
  },

}

</script>
<style scoped>
    #login,.login-bg{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        min-width: 250px !important;
    }
    .login-bg{
        background-image: url(../../../static/img/login/bg.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login-container{
        padding: 10px;
        width: 370px;  
    }
    .login-box{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px 24px;
        border-radius:5px; 
        background-color: rgba(255, 255,255,0.5);
    }
    .login-title{
        font-size: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .input-phone,.input-password{
        padding-bottom: 14px;
    }
    
    .submit-box{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .submit-login{
        width: 100%;
        border-radius: 5px;
        font-size: 16px;
    }
    @media screen and (max-width:760px) {
        .login-container{
            width: 100%!important;
            
        }
    }
    

</style>